<template>
  <div>
    <h4>nums1:{{ nums1 }}<el-button @click="changeNums1">点我nums1加1</el-button></h4>
    <h4>nums2:{{ nums2 }}<el-button @click="changeNums2">点我nums2加1</el-button></h4>
    <h4>
      person:{{ person }}<el-button @click="changeName">点我nums2加1</el-button
      ><el-button @click="changeAge">点我nums2加1</el-button>
    </h4>
  </div>
</template>

<script setup lang="ts">
/*
    vue3的watch属性
        ==>监听reactive所定义的响应式数据是：oalVal无法正确获取，强制开启了深度监听（deep配置失效）
        ==>监听reactvie定义的响应式数据中的某个属性时：deep配置有效
    + watchEffect
        ==>不说是监听谁

*/
import { ref, reactive, watch, watchEffect } from "vue";
let nums1 = ref(0);
let nums2 = ref(0);
let person = reactive({
  name: "小溪流",
  age: 18
});
/**
 * 改变nums1的值
 */
const changeNums1 = () => {
  nums1.value += 1;
};
/**
 * 改变nums2的值
 */
const changeNums2 = () => {
  nums2.value += 1;
};
/**
 * 改变Name的值
 */
const changeName = () => {
  person.name += 1;
};
/**
 * 改变Age的值
 */
const changeAge = () => {
  person.age += 1;
};
//watch的副作用
watchEffect(() => {
  const x1 = nums1.value; //所依赖的数据发生变化  过程
  console.log("watchEffect所指定的回调执行了！");
});
//情况一：监视ref所定义的响应式数据
watch(
  nums1,
  (newVal, oldVal) => {
    console.log("监听nums1的值", newVal);
  }
  // { immediate: true, deep: true }
);
//情况二:监视ref多定义的多个响应式数据
watch(
  [nums1, nums2],
  (newVal, oldVal) => {
    console.log("监听nums1和nums2的值", newVal);
  }
  // { immediate: true, deep: true }
);
//情况三：监听reactive所定义的一个响应式数据中的某个属性
watch(
  [() => person.name],
  (newVal, oldVal) => {
    console.log("监听person.name的值", newVal);
  }
  // { immediate: true, deep: true }
);
//情况四：监听reactive所定义的一个响应式数据中的某些属性
watch(
  [() => person.name, () => person.age],
  (newVal, oldVal) => {
    console.log("监听person.name和person.age的值", newVal);
  }
  // { immediate: true, deep: true }
);
</script>
